<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			body{
			  display:flex;
			  flex-direction:column;/*布局从上向下*/
			}
			header,footer{
				display: flex;
				background: #abcdef;
				width: 100%;
				height: 1rem;
				justify-content: center;/*水平居中*/
				align-items: center;/*垂直居中*/
			}
			header p,footer p{
				font-size: 0.24rem
			}
			.container{
			  display:flex;
			  height: 2rem
			}
			.container .content{
			  flex:1;/*占1/4份   1+2+1=4，所以说一共4份*/
			  background: pink;
			}
			.container .nav{
			  flex:2;/*占2/4份*/
			  background: #ccc;
			}
			.container .ads{
			  flex:1;/*占1/4份*/
			  background: orange
			}
		</style>
	</head>
	<body>
		<header> <p>Header</p> </header>
		  <div class="container">
		    <main class="content"></main>
		    <nav class="nav"></nav>
		    <aside class="ads"></aside>
		  </div>
		  <footer> <p>Footer</p> </footer>
	</body>
</html>